<template>
	<section class="wrapper">
		<div style="padding: 20px;">
			<div class="top_div">
				<i @click="$router.back()" class="iconfont icon24px icon-circle-left" style="color: #333;"></i>
				<h2>{{$t('title_text.Account_Management_title')}}</h2>
			</div>
			<div class="bottom_div">
				<el-form :inline="true" :model="state.account_query_from" class="demo-form-inline">
					<el-form-item label="分组">
						<el-input v-model="state.account_query_from.grouping_name" placeholder="请输入分组" clearable />
					</el-form-item>
					<el-form-item label="账号ID">
						<el-input v-model="state.account_query_from.account_id" placeholder="请输入账号ID" clearable />
					</el-form-item>
					<el-form-item label="分配状态">
						<el-select v-model="state.account_query_from.execute_state" style="width: 240px"
							placeholder="请输入分配状态" clearable>
							<el-option label="Zone one" value="shanghai" />
							<el-option label="Zone two" value="beijing" />
						</el-select>
					</el-form-item>
					<el-form-item label="账号状态">
						<el-select v-model="state.account_query_from.account_state" style="width: 240px" placeholder="请输入任务类型"
							clearable>
							<el-option label="Zone one" value="shanghai" />
							<el-option label="Zone two" value="beijing" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit" icon="Search">查询</el-button>
					</el-form-item>
				</el-form>
				<div style="margin-bottom: 10px;">
					<el-button type="danger" color="#f6440e">删除</el-button>
					<el-button type="primary">账号池</el-button>
					<el-button type="primary" @click="state.Batch_import_accounts_diglog=true">批量导入账号</el-button>
					<el-button type="primary">新增账号</el-button>
				</div>
				<el-table :data="state.tableData" style="width: 100%"
					:header-cell-style="{ textAlign: 'center',backgroundColor: '#fafafa',color:'#333'}"
					:cell-style="{ textAlign: 'center'}">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="date" label="ID" width="180" />
					<el-table-column prop="name" label="分组" width="180" />
					<el-table-column prop="date" label="状态" width="180">
						<template #default="scope">
							<el-tag>{{ scope.row.name }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="分配状态" width="180">
						<template #default="scope">
							<el-tag>{{ scope.row.name }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="创建时间" width="180" />
					<el-table-column prop="name" label="分配时间" width="180" />
					<el-table-column fixed="right" label="Operations" min-width="120">
						<template #default>
							<el-button link type="primary" size="small">编辑</el-button>
							<el-button link type="primary" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog v-model="state.Batch_import_accounts_diglog" width="500" style="height: 400px;"
				:show-close="false">
				<template #header="{ close, titleId, titleClass }">
					<div class="flex_between_center">
						<h4 style="margin: 10px 0px;" :id="titleId" :class="titleClass">批量导入账号</h4>
						<div class="classifys_right_close" @click="state.Batch_import_accounts_diglog = false"><el-icon size="30"
								color="#dfdfdf">
								<CircleClose />
							</el-icon></div>
					</div>
					<div>
						<el-button type="primary">上传账号文件</el-button>
						<el-select v-model="state.account_grouping_value" placeholder="账号分组">
							<el-option v-for="item in state.account_grouping_list" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
						<el-button type="primary">导入</el-button>
						<el-button link type="primary" size="small">导入模板下载</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</section>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onUnmounted,
		getCurrentInstance,
		watch,
	} from 'vue';
	import request from '@/utils'
	import {
		ElMessage,
		ElMessageBox,
		ElLoading,
		ElIcon
	} from 'element-plus';
	import {
		useStore
	} from 'vuex';
	const store = useStore();
	const state = reactive({
		account_query_from: {
			grouping_name: '',
			account_id: '',
			execute_state: '',
			account_state: ''
		},
		Batch_import_accounts_diglog:false, //批量导入账号弹窗开关
		account_grouping_value:'', //账号分组数据
		account_grouping_list:[], //账号分组列表
		tableData: [{
				date: '2016-05-03',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-02',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-04',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
		]
	})
</script>

<style lang="less" scoped>
	h2 {
		margin: 0;
		margin-left: 10px;
	}

	.wrapper {
		background-color: #fff;
		border-radius: 10px;
		position: relative;

		.top_div {
			display: flex;
			align-items: center;
			padding-top: 10px;
			padding-bottom: 20px;
			padding-left: 10px;
			border-bottom: 1px solid #ececec;

			i {
				cursor: pointer;
			}
		}

		.bottom_div {
			margin-top: 20px;
			text-align: left;
		}
	}
</style>